<template>
  <div class="notifications-container">
    <!-- 头部控制区域 -->
<!--    <div class="header-controls">-->
<!--      <div class="view-toggle">-->
<!--        <el-button-group>-->
<!--          <el-button -->
<!--            :type="viewMode === 'bigscreen' ? 'primary' : 'default'" -->
<!--            @click="switchView('bigscreen')"-->
<!--            icon="el-icon-monitor"-->
<!--          >-->
<!--            大屏模式-->
<!--          </el-button>-->
<!--          <el-button -->
<!--            :type="viewMode === 'table' ? 'primary' : 'default'" -->
<!--            @click="switchView('table')"-->
<!--            icon="el-icon-s-grid"-->
<!--          >-->
<!--            表格模式-->
<!--          </el-button>-->
<!--        </el-button-group>-->
<!--      </div>-->
<!--      <div class="current-time" v-if="viewMode === 'bigscreen'">{{ currentTime }}</div>-->
<!--    </div>-->

    <!-- 大屏模式 - ECharts通知仪表板 -->
<!--    <div v-if="viewMode === 'bigscreen'" class="echarts-notification-dashboard">-->
<!--      &lt;!&ndash; 顶部标题栏 &ndash;&gt;-->
<!--      <div class="dashboard-title">-->
<!--        <h1>📊 通知数据分析中心</h1>-->
<!--        <div class="dashboard-info">-->
<!--          <span class="time">{{ currentTime }}</span>-->
<!--          <span class="status">-->
<!--            <i class="el-icon-connection"></i>-->
<!--            实时监控中-->
<!--          </span>-->
<!--        </div>-->
<!--      </div>-->

<!--      &lt;!&ndash; 核心数据卡片 &ndash;&gt;-->
<!--      <div class="data-cards">-->
<!--        <div class="data-card" v-for="stat in notificationStats" :key="stat.type">-->
<!--          <div class="card-header">-->
<!--            <span class="card-icon">{{ stat.icon }}</span>-->
<!--            <span class="card-title">{{ stat.label }}</span>-->
<!--              </div>-->
<!--          <div class="card-value">{{ stat.count }}</div>-->
<!--          <div class="card-trend">-->
<!--            <i class="el-icon-top"></i>-->
<!--            <span>+{{ Math.floor(Math.random() * 20) + 5 }}%</span>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->

<!--      &lt;!&ndash; 图表展示区域 &ndash;&gt;-->
<!--      <div class="charts-area">-->
<!--        &lt;!&ndash; 第一行：主要图表 &ndash;&gt;-->
<!--        <div class="chart-row main-charts">-->
<!--          &lt;!&ndash; 通知趋势图 &ndash;&gt;-->
<!--          <div class="chart-card large">-->
<!--            <div class="chart-title">-->
<!--              <h3>📈 实时通知趋势</h3>-->
<!--              <div class="chart-legend">-->
<!--                <span class="legend-item like">● 点赞</span>-->
<!--                <span class="legend-item comment">● 评论</span>-->
<!--                <span class="legend-item collect">● 收藏</span>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div ref="mainTrendChart" class="chart-canvas"></div>-->
<!--          </div>-->

<!--          &lt;!&ndash; 通知类型分布 &ndash;&gt;-->
<!--          <div class="chart-card medium">-->
<!--            <div class="chart-title">-->
<!--              <h3>🎯 类型分布</h3>-->
<!--            </div>-->
<!--            <div ref="typeDistributionChart" class="chart-canvas"></div>-->
<!--          </div>-->
<!--        </div>-->

<!--        &lt;!&ndash; 第二行：辅助图表 &ndash;&gt;-->
<!--        <div class="chart-row secondary-charts">-->
<!--          &lt;!&ndash; 活跃时段热力图 &ndash;&gt;-->
<!--          <div class="chart-card medium">-->
<!--            <div class="chart-title">-->
<!--              <h3>🕐 活跃时段</h3>-->
<!--              </div>-->
<!--            <div ref="heatmapChart" class="chart-canvas"></div>-->
<!--            </div>-->

<!--          &lt;!&ndash; 用户互动雷达图 &ndash;&gt;-->
<!--          <div class="chart-card medium">-->
<!--            <div class="chart-title">-->
<!--              <h3>⚡ 互动分析</h3>-->
<!--          </div>-->
<!--            <div ref="radarChart" class="chart-canvas"></div>-->
<!--        </div>-->

<!--          &lt;!&ndash; 通知增长漏斗图 &ndash;&gt;-->
<!--          <div class="chart-card medium">-->
<!--            <div class="chart-title">-->
<!--              <h3>📊 转化漏斗</h3>-->
<!--          </div>-->
<!--            <div ref="funnelChart" class="chart-canvas"></div>-->
<!--              </div>-->
<!--              </div>-->

<!--        &lt;!&ndash; 第三行：数据概览 &ndash;&gt;-->
<!--        <div class="chart-row overview-charts">-->
<!--          &lt;!&ndash; 地域分布地图 &ndash;&gt;-->
<!--          <div class="chart-card large">-->
<!--            <div class="chart-title">-->
<!--              <h3>🌍 地域热力</h3>-->
<!--            </div>-->
<!--            <div ref="mapChart" class="chart-canvas"></div>-->
<!--          </div>-->

<!--          &lt;!&ndash; 实时数据流 &ndash;&gt;-->
<!--          <div class="chart-card medium">-->
<!--            <div class="chart-title">-->
<!--              <h3>🔥 实时动态</h3>-->
<!--            </div>-->
<!--            <div ref="streamChart" class="chart-canvas"></div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

    <!-- 表格模式 - 评论管理 -->
    <div  class="table-mode">
      <el-form :model="commentQueryParams" ref="commentQueryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="视频ID" prop="videoId">
        <el-input
            v-model="commentQueryParams.videoId"
            placeholder="请输入视频ID"
          clearable
            @keyup.enter.native="handleCommentQuery"
        />
      </el-form-item>
        <el-form-item label="用户昵称" prop="nickname">
          <el-input
            v-model="commentQueryParams.nickname"
            placeholder="请输入用户昵称"
            clearable
            @keyup.enter.native="handleCommentQuery"
          />
        </el-form-item>
        <el-form-item label="评论状态" prop="status">
          <el-select v-model="commentQueryParams.status" placeholder="请选择状态" clearable>
            <el-option label="正常" value="1" />
            <el-option label="已屏蔽" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="评论类型" prop="commentType">
          <el-select v-model="commentQueryParams.commentType" placeholder="请选择类型" clearable>
            <el-option label="一级评论" value="primary" />
            <el-option label="回复评论" value="reply" />
        </el-select>
      </el-form-item>
      <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleCommentQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetCommentQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
            type="warning"
          plain
            icon="el-icon-close"
          size="mini"
            :disabled="commentMultiple"
            @click="handleBatchBlock"
          >批量屏蔽</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
            icon="el-icon-check"
          size="mini"
            :disabled="commentMultiple"
            @click="handleBatchEnable"
          >批量启用</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
            :disabled="commentMultiple"
            @click="handleBatchDelete"
          >批量删除</el-button>
      </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getCommentList"></right-toolbar>
    </el-row>

      <el-table
        v-loading="commentLoading"
        :data="commentsList"
        @selection-change="handleCommentSelectionChange"
        :tree-props="{children: 'replies'}"
        row-key="id"
        :expand-row-keys="expandedRows"
        @expand-change="handleExpandChange"
        default-expand-all
      >
      <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="评论ID" align="center" prop="id" width="80" />

        <!-- 用户信息列 -->
        <el-table-column label="用户信息" align="center" width="160">
        <template slot-scope="scope">
            <div class="user-info">
              <el-avatar :size="30" :src="scope.row.avatar" icon="el-icon-user-solid"></el-avatar>
              <div class="user-details">
                <div class="nickname">{{ scope.row.nickname }}</div>
                <div class="user-id">ID: {{ scope.row.userId }}</div>
              </div>
            </div>
        </template>
      </el-table-column>

        <!-- 评论内容列 -->
        <el-table-column label="评论内容" align="left" min-width="300">
        <template slot-scope="scope">
            <div class="comment-content">
              <!-- 层级指示器 -->
              <div class="comment-level">
                <el-tag v-if="scope.row.parentId === 0" type="primary" size="mini">
                  <i class="el-icon-chat-dot-square"></i> 一级评论
                </el-tag>
                <el-tag v-else type="info" size="mini">
                  <i class="el-icon-chat-dot-round"></i> 回复评论
                </el-tag>
              </div>

              <!-- 评论文本 -->
              <div class="content-text" :class="{ 'blocked': scope.row.status === 0 }">
                <span v-if="scope.row.parentId && scope.row.parentId !== 0 && scope.row.parentNickname" class="reply-prefix">
                  回复 @{{ scope.row.parentNickname }}：
                </span>
                {{ scope.row.content }}
              </div>

              <!-- 评论统计 -->
              <div class="comment-stats">
                <span class="stat-item">
                  <i class="el-icon-thumb"></i> {{ scope.row.likeCount || 0 }}
                </span>
                <span class="stat-item">
                  <i class="el-icon-chat-dot-round"></i> {{ scope.row.replyCount || 0 }}
                </span>
                <span class="stat-item time">
                  <i class="el-icon-time"></i> {{ formatTime(scope.row.createdAt) }}
                </span>
              </div>
            </div>
        </template>
      </el-table-column>

        <!-- 视频信息列 -->
        <el-table-column label="所属视频" align="center" width="120">
        <template slot-scope="scope">
            <el-button type="text" @click="viewVideo(scope.row.videoId)" class="video-link">
              <i class="el-icon-video-play"></i>
              视频 {{ scope.row.videoId }}
            </el-button>
            <div v-if="scope.row.videoTitle" class="video-title">
              {{ scope.row.videoTitle }}
            </div>
        </template>
      </el-table-column>

        <!-- 状态列 -->
        <el-table-column label="状态" align="center" width="80">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 1" type="success" size="small">
              <i class="el-icon-check"></i> 正常
            </el-tag>
            <el-tag v-else type="danger" size="small">
              <i class="el-icon-close"></i> 屏蔽
            </el-tag>
          </template>
        </el-table-column>

        <!-- 操作列 -->
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180">
          <template slot-scope="scope">
            <!-- 屏蔽/启用按钮 -->
            <el-button
              v-if="scope.row.status === 1"
              size="mini"
              type="text"
              icon="el-icon-close"
              @click="disableComment(scope.row)"
              style="color: #f56c6c"
            >屏蔽</el-button>

            <el-button
              v-else
              size="mini"
              type="text"
              icon="el-icon-check"
              @click="enableComment(scope.row)"
              style="color: #67c23a"
            >启用</el-button>

            <!-- 更多操作下拉菜单 -->
            <el-dropdown @command="(command) => handleCommentAction(command, scope.row)" trigger="click">
              <el-button size="mini" type="text">
                更多<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="blockUser" icon="el-icon-user">
                  <span style="color: #f56c6c">屏蔽用户</span>
                </el-dropdown-item>
                <el-dropdown-item command="viewReplies" icon="el-icon-chat-dot-round" v-if="scope.row.parentId === 0 && scope.row.replyCount > 0">
                  查看回复({{ scope.row.replyCount }})
                </el-dropdown-item>
                <el-dropdown-item command="delete" icon="el-icon-delete">
                  <span style="color: #f56c6c">删除评论</span>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
    </el-table>

    <pagination
        v-show="commentTotal > 0"
        :total="commentTotal"
        :page.sync="commentQueryParams.pageNum"
        :limit.sync="commentQueryParams.pageSize"
        @pagination="getCommentList"
        :page-sizes="[10, 20, 50, 100]"
      />

    <!-- 评论批量管理对话框 -->
    <el-dialog
      title="评论批量管理"
      :visible.sync="showCommentDialog"
      width="80%"
      top="5vh"
    >
      <el-table :data="allComments" style="width: 100%" max-height="500">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="userName" label="用户" width="120" />
        <el-table-column prop="videoTitle" label="视频" width="200" />
        <el-table-column prop="content" label="评论内容" min-width="300" />
        <el-table-column prop="createdAt" label="时间" width="150">
          <template slot-scope="scope">
            {{ formatTime(scope.row.createdAt) }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="80">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
              {{ scope.row.status === 1 ? '正常' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.status === 1"
              type="danger"
              size="mini"
              @click="disableComment(scope.row)"
            >
              禁用
            </el-button>
            <el-button
              v-else
              type="success"
              size="mini"
              @click="enableComment(scope.row)"
            >
              启用
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    </div>
  </div>
</template>

<script>
import { listNotifications, getNotifications, delNotifications, addNotifications, updateNotifications } from "@/api/system/notifications"
import { getRecentLikes, getRecentCollects, getRecentFollows, getTodayStats, getRecentComments, disableComment as apiDisableComment, enableComment as apiEnableComment } from "@/api/system/interactions"
import {
  listCommentsWithHierarchy,
  blockUserComments,
  unblockUserComments,
  blockComment,
  unblockComment,
  batchBlockComments,
  batchEnableComments,
  batchDeleteComments,
  getCommentsByVideoId,
  searchCommentsByNickname,
  delComments
} from "@/api/system/comments"
import * as echarts from 'echarts'

export default {
  name: "Notifications",
  dicts: ['spff_notify_type'],
  data() {
    return {
      // 视图模式
      viewMode: 'table', // 'table' 或 'bigscreen'

      // 时间相关
      currentTime: '',
      timeInterval: null,
      dataInterval: null,
      scrollInterval: null,

      // 大屏数据
      todayStats: {
        likes: 0,
        comments: 0,
        collects: 0,
        follows: 0
      },
      recentLikes: [],
      recentCollects: [],
      recentFollows: [],
      recentComments: [],
      allComments: [],
      showCommentDialog: false,

      // 原有数据
      loading: true,
      ids: [],
      single: true,
      multiple: true,
      showSearch: true,
      total: 0,
      notificationsList: [],
      title: "",
      open: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        senderId: null,
        type: null,
      },
      form: {},
      rules: {
        userId: [
          { required: true, message: "接收用户ID不能为空", trigger: "blur" }
        ],
        type: [
          { required: true, message: "通知类型:1-点赞,2-评论,3-关注,4-分享不能为空", trigger: "change" }
        ],
      },

      // 评论管理相关数据
      commentLoading: false,
      commentIds: [],
      commentSingle: true,
      commentMultiple: true,
      commentTotal: 0,
      commentsList: [],
      commentQueryParams: {
        pageNum: 1,
        pageSize: 20,
        videoId: null,
        nickname: null,
        status: null,
        commentType: null // 'primary' 一级评论, 'reply' 回复评论
      },
      expandedRows: [], // 展开的行

      // ECharts 图表实例
      charts: {
        mainTrendChart: null,
        typeDistributionChart: null,
        heatmapChart: null,
        radarChart: null,
        funnelChart: null,
        mapChart: null,
        streamChart: null
      },

      // 通知统计数据
      notificationStats: [
        { type: 'like', icon: '👍', label: '点赞', count: 1234 },
        { type: 'comment', icon: '💬', label: '评论', count: 456 },
        { type: 'collect', icon: '⭐', label: '收藏', count: 789 },
        { type: 'follow', icon: '👥', label: '关注', count: 123 },
        { type: 'share', icon: '🔗', label: '分享', count: 567 }
      ],

      // 通知消息列表
      notifications: [],

      // 热门内容排行
      hotContent: [
        { id: 1, title: '如何制作美味早餐', views: '12.5K', likes: '2.3K', comments: '456', trend: 'up' },
        { id: 2, title: '旅行摄影技巧分享', views: '9.8K', likes: '1.8K', comments: '234', trend: 'up' },
        { id: 3, title: '健身小白入门指南', views: '8.2K', likes: '1.5K', comments: '189', trend: 'down' },
        { id: 4, title: '编程学习心得', views: '7.6K', likes: '1.2K', comments: '167', trend: 'up' },
        { id: 5, title: '音乐制作教程', views: '6.9K', likes: '980', comments: '145', trend: 'down' }
      ],

      // 实时动态数据
      realtimeActivities: [],

      // 图表数据
      chartData: {
        weekTrend: {
          dates: [],
          likes: [],
          comments: [],
          collects: [],
          follows: []
        },
        userBehavior: {
          data: [
            { name: '点赞', value: 0 },
            { name: '评论', value: 0 },
            { name: '收藏', value: 0 },
            { name: '关注', value: 0 },
            { name: '分享', value: 0 }
          ]
        },
        categories: {
          names: [],
          values: []
        },
        hourlyActivity: {
          hours: [],
          activities: []
        },
        commentsStatus: {
          normal: 0,
          blocked: 0,
          pending: 0
        }
      }
    }
  },
  created() {
    if (this.viewMode === 'table') {
      this.getCommentList()
    } else {
    this.getList()
    }
  },
  mounted() {
    this.initTime()
  },
  beforeDestroy() {
    if (this.timeInterval) clearInterval(this.timeInterval)
    if (this.dataInterval) clearInterval(this.dataInterval)
    if (this.scrollInterval) clearInterval(this.scrollInterval)
  },
  methods: {
    // 切换视图模式
    switchView(mode) {
      this.viewMode = mode
      if (mode === 'bigscreen') {
        this.$nextTick(() => {
          this.generateNotifications()
          this.initCharts()
          this.updateCharts()
          this.startNotificationUpdates()
        })
      } else {
        // 清理大屏相关的定时器和图表
        this.destroyCharts()
        if (this.dataInterval) clearInterval(this.dataInterval)
        // 加载评论数据
        this.getCommentList()
      }
    },

    // 初始化时间
    initTime() {
      this.updateTime()
      this.timeInterval = setInterval(this.updateTime, 1000)
    },

    updateTime() {
      const now = new Date()
      this.currentTime = now.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      })
    },


    // 加载大屏数据
    async loadBigScreenData() {
      try {
        // 加载统计数据
        await this.loadTodayStats()

        // 加载滚动数据
        await this.loadRecentData()
      } catch (error) {
        console.error('加载大屏数据失败:', error)
      }
    },

    // 加载今日统计
    async loadTodayStats() {
      try {
        const response = await getTodayStats()
        this.todayStats = response.data || {
          likes: 0,
          comments: 0,
          collects: 0,
          follows: 0
        }
      } catch (error) {
        console.error('加载统计数据失败:', error)
        // 使用默认值
        this.todayStats = {
          likes: 0,
          comments: 0,
          collects: 0,
          follows: 0
        }
      }
    },

    // 加载最近数据
    async loadRecentData() {
      try {
        const [likesRes, collectsRes, followsRes, commentsRes] = await Promise.all([
          getRecentLikes(),
          getRecentCollects(),
          getRecentFollows(),
          getRecentComments()
        ])

        this.recentLikes = likesRes.data || []
        this.recentCollects = collectsRes.data || []
        this.recentFollows = followsRes.data || []
        this.recentComments = commentsRes.data || []
        this.allComments = [...this.recentComments]
      } catch (error) {
        console.error('加载最近数据失败:', error)
        // 使用空数组作为默认值
        this.recentLikes = []
        this.recentCollects = []
        this.recentFollows = []
        this.recentComments = []
        this.allComments = []
      }
    },


    // 开始自动滚动
    startAutoScroll() {
      this.scrollInterval = setInterval(() => {
        this.autoScroll(this.$refs.likeScroll)
        this.autoScroll(this.$refs.collectScroll)
        this.autoScroll(this.$refs.followScroll)
        this.autoScroll(this.$refs.commentScroll)
      }, 3000)
    },

    autoScroll(element) {
      if (element) {
        element.scrollTop += 60
        if (element.scrollTop >= element.scrollHeight - element.clientHeight) {
          element.scrollTop = 0
        }
      }
    },

    // 开始数据刷新
    startDataRefresh() {
      this.dataInterval = setInterval(() => {
        this.loadBigScreenData()
      }, 30000) // 30秒刷新一次
    },

    // 禁用评论
    async disableComment(comment) {
      try {
        await this.$confirm(
          `确认要屏蔽这条评论吗？${comment.parentId === 0 ? '如果是一级评论，其下的所有回复也会被屏蔽。' : ''}`,
          '确认屏蔽',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )

        await blockComment(comment.id)
        comment.status = 0
        this.$message.success('评论已屏蔽')

        // 刷新列表
        this.getCommentList()
      } catch (error) {
        if (error !== 'cancel') {
          console.error('屏蔽评论失败:', error)
        this.$message.error('操作失败')
        }
      }
    },

    // 启用评论
    async enableComment(comment) {
      try {
        await this.$confirm(
          `确认要启用这条评论吗？${comment.parentId === 0 ? '如果是一级评论，其下的所有回复也会被启用。' : ''}`,
          '确认启用',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info'
          }
        )

        await unblockComment(comment.id)
        comment.status = 1
        this.$message.success('评论已启用')

        // 刷新列表
        this.getCommentList()
      } catch (error) {
        if (error !== 'cancel') {
        console.error('启用评论失败:', error)
        this.$message.error('操作失败')
        }
      }
    },

    // 获取通知文本
    getNotificationText(item) {
      const typeMap = {
        1: `点赞了你的内容`,
        2: `评论了你的内容`,
        3: `关注了你`,
        4: `分享了你的内容`
      }
      return typeMap[item.type] || '未知操作'
    },

    // 获取类型文本
    getTypeText(type) {
      const typeMap = { 1: '点赞', 2: '评论', 3: '关注', 4: '分享' }
      return typeMap[type] || '未知'
    },

    // 获取类型标签类型
    getTypeTagType(type) {
      const typeMap = { 1: 'danger', 2: 'primary', 3: 'success', 4: 'warning' }
      return typeMap[type] || 'info'
    },

    // 格式化时间
    formatTime(time) {
      if (!time) return ''
      const now = new Date()
      const target = new Date(time)
      const diff = now - target

      if (diff < 60000) return '刚刚'
      if (diff < 3600000) return Math.floor(diff / 60000) + '分钟前'
      if (diff < 86400000) return Math.floor(diff / 3600000) + '小时前'
      return Math.floor(diff / 86400000) + '天前'
    },
    /** 查询通知列表 */
    getList() {
      this.loading = true
      listNotifications(this.queryParams).then(response => {
        this.notificationsList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        userId: null,
        senderId: null,
        type: null,
        content: null,
        relatedId: null,
        isRead: null,
        createdAt: null
      }
      this.resetForm("form")
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm")
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = "添加通知"
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const id = row.id || this.ids
      getNotifications(id).then(response => {
        this.form = response.data
        this.open = true
        this.title = "修改通知"
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateNotifications(this.form).then(response => {
              this.$modal.msgSuccess("修改成功")
              this.open = false
              this.getList()
            })
          } else {
            addNotifications(this.form).then(response => {
              this.$modal.msgSuccess("新增成功")
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids
      this.$modal.confirm('是否确认删除通知编号为"' + ids + '"的数据项？').then(function() {
        return delNotifications(ids)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess("删除成功")
      }).catch(() => {})
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/notifications/export', {
        ...this.queryParams
      }, `notifications_${new Date().getTime()}.xlsx`)
    },

    // ======== 评论管理相关方法 ========

    /** 查询评论列表 */
    async getCommentList() {
      this.commentLoading = true
      try {
        let response

        // 根据查询条件选择不同的API
        if (this.commentQueryParams.videoId) {
          // 按视频ID查询
          response = await getCommentsByVideoId(this.commentQueryParams.videoId, {
            pageNum: this.commentQueryParams.pageNum,
            pageSize: this.commentQueryParams.pageSize,
            status: this.commentQueryParams.status,
            commentType: this.commentQueryParams.commentType
          })
        } else if (this.commentQueryParams.nickname) {
          // 按用户昵称搜索
          response = await searchCommentsByNickname(this.commentQueryParams.nickname, {
            pageNum: this.commentQueryParams.pageNum,
            pageSize: this.commentQueryParams.pageSize,
            status: this.commentQueryParams.status,
            commentType: this.commentQueryParams.commentType
          })
        } else {
          // 查询所有评论（包含层级结构）
          response = await listCommentsWithHierarchy({
            pageNum: this.commentQueryParams.pageNum,
            pageSize: this.commentQueryParams.pageSize,
            status: this.commentQueryParams.status,
            commentType: this.commentQueryParams.commentType
          })
        }

        // 后端已经构建好了树形结构，直接使用
        this.commentsList = response.rows || response.data || []
        this.commentTotal = response.total || 0

      } catch (error) {
        console.error('获取评论列表失败:', error)
        this.$message.error('获取评论列表失败')
        this.commentsList = []
        this.commentTotal = 0
      } finally {
        this.commentLoading = false
      }
    },

    /** 构建评论树形结构 */
    buildCommentTree(comments) {
      if (!comments || comments.length === 0) return []

      const commentMap = new Map()
      const rootComments = []

      // 首先将所有评论放入Map中
      comments.forEach(comment => {
        comment.replies = []
        comment.hasReplies = false
        commentMap.set(comment.id, comment)
      })

      // 构建树形结构
      comments.forEach(comment => {
        if (comment.parentId === 0 || comment.parentId === null) {
          // 一级评论
          rootComments.push(comment)
        } else {
          // 二级评论，找到父评论
          const parent = commentMap.get(comment.parentId)
          if (parent) {
            parent.replies.push(comment)
            parent.hasReplies = true
            parent.replyCount = parent.replies.length
          }
        }
      })

      return rootComments
    },

    /** 评论查询 */
    handleCommentQuery() {
      this.commentQueryParams.pageNum = 1
      this.getCommentList()
    },

    /** 重置评论查询 */
    resetCommentQuery() {
      this.resetForm("commentQueryForm")
      this.handleCommentQuery()
    },

    /** 评论多选框选中数据 */
    handleCommentSelectionChange(selection) {
      this.commentIds = selection.map(item => item.id)
      this.commentSingle = selection.length !== 1
      this.commentMultiple = !selection.length
    },

    /** 处理表格展开变化 */
    handleExpandChange(row, expandedRows) {
      this.expandedRows = expandedRows.map(r => r.id)
    },

    /** 查看视频 */
    viewVideo(videoId) {
      this.$message.info(`跳转到视频 ${videoId}`)
      // 实际应该路由跳转到视频详情页
      // this.$router.push(`/video/${videoId}`)
    },

    /** 评论操作处理 */
    async handleCommentAction(command, comment) {
      switch (command) {
        case 'blockUser':
          await this.blockUser(comment)
          break
        case 'viewReplies':
          await this.viewReplies(comment)
          break
        case 'delete':
          await this.deleteComment(comment)
          break
      }
    },

    /** 屏蔽用户的所有评论 */
    async blockUser(comment) {
      try {
        await this.$confirm(
          `确认要屏蔽用户"${comment.nickname}"的所有评论吗？此操作将屏蔽该用户的所有评论。`,
          '确认屏蔽用户',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )

        await blockUserComments(comment.userId)
        this.$message.success('用户评论已全部屏蔽')
        this.getCommentList()
      } catch (error) {
        if (error !== 'cancel') {
          console.error('屏蔽用户失败:', error)
          this.$message.error('操作失败')
        }
      }
    },

    /** 查看回复 */
    async viewReplies(comment) {
      // 展开/折叠回复
      const index = this.expandedRows.indexOf(comment.id)
      if (index > -1) {
        this.expandedRows.splice(index, 1)
      } else {
        this.expandedRows.push(comment.id)
      }
    },

    /** 删除评论 */
    async deleteComment(comment) {
      try {
        await this.$confirm(
          `确认要删除这条评论吗？${comment.parentId === 0 ? '删除一级评论会同时删除所有回复。' : ''}此操作不可恢复！`,
          '确认删除',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )

        await delComments(comment.id)
        this.$message.success('评论已删除')
        this.getCommentList()
      } catch (error) {
        if (error !== 'cancel') {
          console.error('删除评论失败:', error)
          this.$message.error('操作失败')
        }
      }
    },

    /** 批量屏蔽评论 */
    async handleBatchBlock() {
      if (this.commentIds.length === 0) {
        this.$message.warning('请先选择要屏蔽的评论')
        return
      }

      try {
        await this.$confirm(
          `确认要屏蔽选中的 ${this.commentIds.length} 条评论吗？一级评论被屏蔽时，其子评论也会被屏蔽。`,
          '批量屏蔽',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )

        await batchBlockComments(this.commentIds)
        this.$message.success('批量屏蔽成功')
        this.getCommentList()

        // 清空选择
        this.commentIds = []
        this.commentMultiple = true
      } catch (error) {
        if (error !== 'cancel') {
          console.error('批量屏蔽失败:', error)
          this.$message.error('操作失败')
        }
      }
    },

    /** 批量启用评论 */
    async handleBatchEnable() {
      if (this.commentIds.length === 0) {
        this.$message.warning('请先选择要启用的评论')
        return
      }

      try {
        await this.$confirm(
          `确认要启用选中的 ${this.commentIds.length} 条评论吗？`,
          '批量启用',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info'
          }
        )

        await batchEnableComments(this.commentIds)
        this.$message.success('批量启用成功')
        this.getCommentList()

        // 清空选择
        this.commentIds = []
        this.commentMultiple = true
      } catch (error) {
        if (error !== 'cancel') {
          console.error('批量启用失败:', error)
          this.$message.error('操作失败')
        }
      }
    },

    /** 批量删除评论 */
    async handleBatchDelete() {
      if (this.commentIds.length === 0) {
        this.$message.warning('请先选择要删除的评论')
        return
      }

      try {
        await this.$confirm(
          `确认要删除选中的 ${this.commentIds.length} 条评论吗？此操作不可恢复！删除一级评论会同时删除其所有回复。`,
          '批量删除',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )

        await batchDeleteComments(this.commentIds)
        this.$message.success('批量删除成功')
        this.getCommentList()

        // 清空选择
        this.commentIds = []
        this.commentMultiple = true
      } catch (error) {
        if (error !== 'cancel') {
          console.error('批量删除失败:', error)
          this.$message.error('操作失败')
        }
      }
    },

    // ======== ECharts 相关方法 ========

    // 初始化所有ECharts图表
    initCharts() {
      this.$nextTick(() => {
        this.initMainTrendChart()
        this.initTypeDistributionChart()
        this.initHeatmapChart()
        this.initRadarChart()
        this.initFunnelChart()
        this.initMapChart()
        this.initStreamChart()
      })
    },

    // 初始化主趋势图
    initMainTrendChart() {
      if (this.$refs.mainTrendChart) {
        this.charts.mainTrendChart = echarts.init(this.$refs.mainTrendChart)
        this.updateMainTrendChart()
      }
    },

    // 初始化类型分布图
    initTypeDistributionChart() {
      if (this.$refs.typeDistributionChart) {
        this.charts.typeDistributionChart = echarts.init(this.$refs.typeDistributionChart)
        this.updateTypeDistributionChart()
      }
    },

    // 初始化热力图
    initHeatmapChart() {
      if (this.$refs.heatmapChart) {
        this.charts.heatmapChart = echarts.init(this.$refs.heatmapChart)
        this.updateHeatmapChart()
      }
    },

    // 初始化雷达图
    initRadarChart() {
      if (this.$refs.radarChart) {
        this.charts.radarChart = echarts.init(this.$refs.radarChart)
        this.updateRadarChart()
      }
    },

    // 初始化漏斗图
    initFunnelChart() {
      if (this.$refs.funnelChart) {
        this.charts.funnelChart = echarts.init(this.$refs.funnelChart)
        this.updateFunnelChart()
      }
    },

    // 初始化地图
    initMapChart() {
      if (this.$refs.mapChart) {
        this.charts.mapChart = echarts.init(this.$refs.mapChart)
        this.updateMapChart()
      }
    },

    // 初始化实时流图
    initStreamChart() {
      if (this.$refs.streamChart) {
        this.charts.streamChart = echarts.init(this.$refs.streamChart)
        this.updateStreamChart()
      }
    },

    // 生成通知消息数据
    generateNotifications() {
      const types = ['like', 'comment', 'collect', 'follow', 'share']
      const users = ['张三', '李四', '王五', '赵六', '钱七', '孙八', '周九', '陈十']
      const targets = ['《美食制作教程》', '《旅行日记》', '《编程心得》', '《摄影技巧》', '《健身指南》', '《音乐分享》']
      const avatars = ['/avatar1.jpg', '/avatar2.jpg', '/avatar3.jpg', '/avatar4.jpg']

      const notifications = []
      for (let i = 0; i < 20; i++) {
        const type = types[Math.floor(Math.random() * types.length)]
        const user = users[Math.floor(Math.random() * users.length)]
        const target = targets[Math.floor(Math.random() * targets.length)]

        const notification = {
          id: Date.now() + i,
          type: type,
          userName: user,
          targetName: target,
          avatar: avatars[Math.floor(Math.random() * avatars.length)],
          timestamp: new Date(Date.now() - Math.random() * 3600000),
          content: type === 'comment' ? this.generateCommentText() : null
        }

        notifications.push(notification)
      }

      this.notifications = notifications.sort((a, b) => b.timestamp - a.timestamp)
    },

    // 生成评论内容
    generateCommentText() {
      const comments = [
        '太棒了！学到了很多',
        '感谢分享，很有用',
        '期待更多内容',
        '制作得很精美',
        '继续加油！',
        '很实用的教程',
        '点赞支持'
      ]
      return comments[Math.floor(Math.random() * comments.length)]
    },

    // 获取操作文本
    getActionText(type) {
      const actions = {
        like: '点赞了',
        comment: '评论了',
        collect: '收藏了',
        follow: '关注了',
        share: '分享了'
      }
      return actions[type] || '互动了'
    },

    // 获取类型图标
    getTypeIcon(type) {
      const icons = {
        like: '👍',
        comment: '💬',
        collect: '⭐',
        follow: '👥',
        share: '🔗'
      }
      return icons[type] || '📝'
    },

    // 添加新通知
    addNewNotification() {
      const types = ['like', 'comment', 'collect', 'follow', 'share']
      const users = ['张三', '李四', '王五', '赵六', '钱七', '孙八']
      const targets = ['《美食制作教程》', '《旅行日记》', '《编程心得》', '《摄影技巧》']
      const avatars = ['/avatar1.jpg', '/avatar2.jpg', '/avatar3.jpg', '/avatar4.jpg']

      const type = types[Math.floor(Math.random() * types.length)]
      const newNotification = {
        id: Date.now(),
        type: type,
        userName: users[Math.floor(Math.random() * users.length)],
        targetName: targets[Math.floor(Math.random() * targets.length)],
        avatar: avatars[Math.floor(Math.random() * avatars.length)],
        timestamp: new Date(),
        content: type === 'comment' ? this.generateCommentText() : null
      }

      this.notifications.unshift(newNotification)
      if (this.notifications.length > 50) {
        this.notifications = this.notifications.slice(0, 50)
      }

      // 更新统计数据
      const statIndex = this.notificationStats.findIndex(s => s.type === type)
      if (statIndex !== -1) {
        this.notificationStats[statIndex].count++
      }

      // 自动滚动到顶部显示新消息
      this.$nextTick(() => {
        if (this.$refs.messageList) {
          this.$refs.messageList.scrollTop = 0
        }
      })
    },

    // 加载图表数据
    async loadChartData() {
      try {
        this.generateMockData()
        this.updateAllCharts()
      } catch (error) {
        console.error('加载图表数据失败:', error)
      }
    },

    // 生成模拟数据
    generateMockData() {
      // 生成7天日期
      const dates = []
      for (let i = 6; i >= 0; i--) {
        const date = new Date()
        date.setDate(date.getDate() - i)
        dates.push(date.toLocaleDateString('zh-CN', { month: '2-digit', day: '2-digit' }))
      }
      this.chartData.weekTrend.dates = dates
      this.chartData.weekTrend.likes = Array.from({length: 7}, () => Math.floor(Math.random() * 100) + 50)
      this.chartData.weekTrend.comments = Array.from({length: 7}, () => Math.floor(Math.random() * 80) + 30)
      this.chartData.weekTrend.collects = Array.from({length: 7}, () => Math.floor(Math.random() * 60) + 20)
      this.chartData.weekTrend.follows = Array.from({length: 7}, () => Math.floor(Math.random() * 40) + 10)

      // 用户行为数据
      this.chartData.userBehavior.data = [
        { name: '点赞', value: Math.floor(Math.random() * 500) + 200 },
        { name: '评论', value: Math.floor(Math.random() * 300) + 100 },
        { name: '收藏', value: Math.floor(Math.random() * 200) + 80 },
        { name: '关注', value: Math.floor(Math.random() * 150) + 50 },
        { name: '分享', value: Math.floor(Math.random() * 100) + 30 }
      ]

      // 生成实时动态
      this.generateRealtimeData()
    },

    // 生成实时动态数据
    generateRealtimeData() {
      const activities = []
      const actions = [
        { type: 'like', action: '点赞了视频', icon: '👍' },
        { type: 'comment', action: '评论了视频', icon: '💬' },
        { type: 'collect', action: '收藏了视频', icon: '⭐' },
        { type: 'follow', action: '关注了用户', icon: '👥' }
      ]
      const users = ['张三', '李四', '王五', '赵六', '钱七', '孙八', '周九', '陈十']
      const targets = ['《美食制作》', '《搞笑日常》', '《学习技巧》', '《音乐分享》', '《旅行记录》', '《生活感悟》']

      for (let i = 0; i < 15; i++) {
        const action = actions[Math.floor(Math.random() * actions.length)]
        activities.push({
          id: Date.now() + i,
          type: action.type,
          userName: users[Math.floor(Math.random() * users.length)],
          action: action.action,
          target: targets[Math.floor(Math.random() * targets.length)],
          timestamp: new Date(Date.now() - Math.random() * 7200000) // 2小时内
        })
      }

      this.realtimeActivities = activities.sort((a, b) => b.timestamp - a.timestamp)
    },

    // 添加新的实时活动
    addNewActivity() {
      const actions = [
        { type: 'like', action: '点赞了视频', icon: '👍' },
        { type: 'comment', action: '评论了视频', icon: '💬' },
        { type: 'collect', action: '收藏了视频', icon: '⭐' },
        { type: 'follow', action: '关注了用户', icon: '👥' }
      ]
      const users = ['张三', '李四', '王五', '赵六', '钱七', '孙八', '周九', '陈十']
      const targets = ['《美食制作》', '《搞笑日常》', '《学习技巧》', '《音乐分享》', '《旅行记录》', '《生活感悟》']

      const action = actions[Math.floor(Math.random() * actions.length)]
      const newActivity = {
        id: Date.now(),
        type: action.type,
        userName: users[Math.floor(Math.random() * users.length)],
        action: action.action,
        target: targets[Math.floor(Math.random() * targets.length)],
        timestamp: new Date()
      }

      this.realtimeActivities.unshift(newActivity)
      if (this.realtimeActivities.length > 30) {
        this.realtimeActivities = this.realtimeActivities.slice(0, 30)
      }
    },

    // 获取活动图标
    getActivityIcon(type) {
      const icons = {
        like: '👍',
        comment: '💬',
        collect: '⭐',
        follow: '👥',
        share: '🔗'
      }
      return icons[type] || '📝'
    },

    // 更新主趋势图
    updateMainTrendChart() {
      if (this.charts.mainTrendChart) {
        const hours = Array.from({length: 24}, (_, i) => i)
        const likeData = hours.map(() => Math.floor(Math.random() * 50) + 20)
        const commentData = hours.map(() => Math.floor(Math.random() * 30) + 10)
        const collectData = hours.map(() => Math.floor(Math.random() * 40) + 15)

        const option = {
          backgroundColor: 'transparent',
          tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(50, 50, 50, 0.9)',
            borderColor: '#ccc',
            textStyle: { color: '#fff' }
          },
          legend: {
            data: ['点赞', '评论', '收藏'],
            textStyle: { color: '#333' },
            top: 10
          },
          grid: { left: '5%', right: '5%', top: '20%', bottom: '10%', containLabel: true },
          xAxis: {
            type: 'category',
            data: hours.map(h => h + ':00'),
            axisLine: { lineStyle: { color: '#ddd' } },
            axisTick: { show: false },
            axisLabel: { color: '#666', interval: 3 }
          },
          yAxis: {
            type: 'value',
            axisLine: { show: false },
            axisTick: { show: false },
            splitLine: { lineStyle: { color: '#f0f0f0' } },
            axisLabel: { color: '#666' }
          },
          series: [
            {
              name: '点赞',
              type: 'line',
              smooth: true,
              data: likeData,
              lineStyle: { width: 3, color: '#ff6b6b' },
              areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(255, 107, 107, 0.3)' },
                { offset: 1, color: 'rgba(255, 107, 107, 0.1)' }
              ])}
            },
            {
              name: '评论',
              type: 'line',
              smooth: true,
              data: commentData,
              lineStyle: { width: 3, color: '#4ecdc4' },
              areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(78, 205, 196, 0.3)' },
                { offset: 1, color: 'rgba(78, 205, 196, 0.1)' }
              ])}
            },
            {
              name: '收藏',
              type: 'line',
              smooth: true,
              data: collectData,
              lineStyle: { width: 3, color: '#feca57' },
              areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(254, 202, 87, 0.3)' },
                { offset: 1, color: 'rgba(254, 202, 87, 0.1)' }
              ])}
            }
          ]
        }
        this.charts.mainTrendChart.setOption(option)
      }
    },

    // 更新类型分布图
    updateTypeDistributionChart() {
      if (this.charts.typeDistributionChart) {
        const data = this.notificationStats.map(stat => ({
          name: stat.label,
          value: stat.count,
          itemStyle: { color: this.getTypeColor(stat.type) }
        }))

        const option = {
          backgroundColor: 'transparent',
          tooltip: {
            trigger: 'item',
            formatter: '{b}: {c}<br/>占比: {d}%',
            backgroundColor: 'rgba(50, 50, 50, 0.9)',
            textStyle: { color: '#fff' }
          },
          series: [{
            type: 'pie',
            radius: ['30%', '70%'],
            center: ['50%', '50%'],
            data: data,
            label: { show: false },
            labelLine: { show: false },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        }
        this.charts.typeDistributionChart.setOption(option)
      }
    },

    // 更新热力图
    updateHeatmapChart() {
      if (this.charts.heatmapChart) {
        const hours = ['0', '2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22']
        const days = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        const data = []

        for (let i = 0; i < 7; i++) {
          for (let j = 0; j < 12; j++) {
            data.push([j, i, Math.floor(Math.random() * 100)])
          }
        }

        const option = {
          backgroundColor: 'transparent',
          tooltip: {
            position: 'top',
            formatter: function (params) {
              return `${days[params.data[1]]} ${hours[params.data[0]]}:00<br/>活跃度: ${params.data[2]}`
            }
          },
          grid: { height: '80%', top: '10%', left: '15%', right: '5%' },
          xAxis: {
            type: 'category',
            data: hours,
            splitArea: { show: true },
            axisLabel: { color: '#666' }
          },
          yAxis: {
            type: 'category',
            data: days,
            splitArea: { show: true },
            axisLabel: { color: '#666' }
          },
          visualMap: {
            min: 0,
            max: 100,
            calculable: true,
            orient: 'horizontal',
            left: 'center',
            bottom: '5%',
            inRange: {
              color: ['#e0f3ff', '#87ceeb', '#4682b4', '#1e90ff', '#0066cc']
            },
            textStyle: { color: '#666' }
          },
          series: [{
            type: 'heatmap',
            data: data,
            label: { show: false }
          }]
        }
        this.charts.heatmapChart.setOption(option)
      }
    },

    // 更新雷达图
    updateRadarChart() {
      if (this.charts.radarChart) {
        const option = {
          backgroundColor: 'transparent',
          tooltip: {
            backgroundColor: 'rgba(50, 50, 50, 0.9)',
            textStyle: { color: '#fff' }
          },
          radar: {
            indicator: [
              { name: '点赞活跃度', max: 100 },
              { name: '评论质量', max: 100 },
              { name: '分享传播', max: 100 },
              { name: '关注转化', max: 100 },
              { name: '收藏价值', max: 100 }
            ],
            center: ['50%', '50%'],
            radius: '70%',
            name: { textStyle: { color: '#666' } },
            splitLine: { lineStyle: { color: '#ddd' } },
            splitArea: { show: false },
            axisLine: { lineStyle: { color: '#ddd' } }
          },
          series: [{
            type: 'radar',
            data: [{
              value: [85, 78, 92, 65, 88],
              name: '用户互动指数',
              itemStyle: { color: '#667eea' },
              areaStyle: { color: 'rgba(102, 126, 234, 0.3)' }
            }]
          }]
        }
        this.charts.radarChart.setOption(option)
      }
    },

    // 更新漏斗图
    updateFunnelChart() {
      if (this.charts.funnelChart) {
        const option = {
          backgroundColor: 'transparent',
          tooltip: {
            trigger: 'item',
            formatter: '{b}: {c}',
            backgroundColor: 'rgba(50, 50, 50, 0.9)',
            textStyle: { color: '#fff' }
          },
          series: [{
            type: 'funnel',
            left: '10%',
            top: '10%',
            width: '80%',
            height: '80%',
            data: [
              { value: 1000, name: '浏览' },
              { value: 800, name: '点击' },
              { value: 600, name: '点赞' },
              { value: 400, name: '评论' },
              { value: 200, name: '分享' }
            ],
            itemStyle: {
              color: function(params) {
                const colors = ['#667eea', '#764ba2', '#ff6b6b', '#4ecdc4', '#feca57']
                return colors[params.dataIndex]
              }
            },
            label: {
              show: true,
              fontSize: 12,
              color: '#333'
            }
          }]
        }
        this.charts.funnelChart.setOption(option)
      }
    },

    // 更新地图
    updateMapChart() {
      if (this.charts.mapChart) {
        const data = [
          { name: '北京', value: 199 },
          { name: '上海', value: 180 },
          { name: '广东', value: 165 },
          { name: '浙江', value: 120 },
          { name: '江苏', value: 100 },
          { name: '四川', value: 90 },
          { name: '湖北', value: 80 },
          { name: '山东', value: 75 }
        ]

        const option = {
          backgroundColor: 'transparent',
          tooltip: {
            trigger: 'item',
            formatter: '{b}: {c}',
            backgroundColor: 'rgba(50, 50, 50, 0.9)',
            textStyle: { color: '#fff' }
          },
          visualMap: {
            min: 0,
            max: 200,
            left: 'left',
            top: 'bottom',
            text: ['高', '低'],
            calculable: true,
            inRange: {
              color: ['#e0f3ff', '#87ceeb', '#4682b4']
            },
            textStyle: { color: '#666' }
          },
          series: [{
            type: 'map',
            map: 'china',
            roam: false,
            data: data,
            emphasis: {
              itemStyle: {
                areaColor: '#feca57'
              }
            }
          }]
        }
        this.charts.mapChart.setOption(option)
      }
    },

    // 更新实时流图
    updateStreamChart() {
      if (this.charts.streamChart) {
        const categories = ['点赞', '评论', '收藏', '关注', '分享']
        const data = []
        const now = new Date()

        for (let i = 0; i < 20; i++) {
          const time = new Date(now.getTime() - i * 60000)
          const category = categories[Math.floor(Math.random() * categories.length)]
          data.push({
            name: time.toLocaleTimeString(),
            value: [
              time.toLocaleTimeString(),
              categories.indexOf(category),
              Math.floor(Math.random() * 50) + 10
            ]
          })
        }

        const option = {
          backgroundColor: 'transparent',
          tooltip: {
            trigger: 'item',
            formatter: function(params) {
              return `${params.data.value[0]}<br/>${categories[params.data.value[1]]}: ${params.data.value[2]}`
            }
          },
          xAxis: {
            type: 'category',
            data: data.map(d => d.value[0]),
            axisLabel: {
              color: '#666',
              rotate: 45,
              interval: 2
            }
          },
          yAxis: {
            type: 'category',
            data: categories,
            axisLabel: { color: '#666' }
          },
          series: [{
            type: 'scatter',
            symbolSize: function (val) {
              return val[2] / 2
            },
            data: data.map(d => d.value),
            itemStyle: {
              color: function(params) {
                const colors = ['#ff6b6b', '#4ecdc4', '#feca57', '#48dbfb', '#ff9ff3']
                return colors[params.data[1]]
              }
            }
          }]
        }
        this.charts.streamChart.setOption(option)
      }
    },

    // 获取类型颜色
    getTypeColor(type) {
      const colors = {
        like: '#ff6b6b',
        comment: '#4ecdc4',
        collect: '#feca57',
        follow: '#48dbfb',
        share: '#ff9ff3'
      }
      return colors[type] || '#95a5a6'
    },

    // 更新行为饼图 - 简洁版
    updateBehaviorChart() {
      if (this.charts.behaviorChart) {
        const option = {
          backgroundColor: 'transparent',
          tooltip: {
            trigger: 'item',
            formatter: '{b}: {c} ({d}%)',
            backgroundColor: 'rgba(0,0,0,0.8)',
            textStyle: { color: '#fff' }
          },
          series: [{
            name: '用户行为',
            type: 'pie',
            radius: ['30%', '80%'],
            center: ['50%', '50%'],
            data: this.chartData.userBehavior.data.map((item, index) => ({
              ...item,
              itemStyle: {
                color: ['#ff6b6b', '#4ecdc4', '#45b7d1', '#f9ca24', '#a55eea'][index % 5]
              }
            })),
            label: {
              show: true,
              formatter: '{b}\n{d}%',
              fontSize: 12,
              color: '#666'
            },
            labelLine: { show: false }
          }]
        }
        this.charts.behaviorChart.setOption(option)
      }
    },

    // 更新分类图表 - 简洁版
    updateCategoryChart() {
      if (this.charts.categoryChart) {
        const categories = ['娱乐', '教育', '科技', '生活', '音乐', '体育']
        const values = Array.from({length: 6}, () => Math.floor(Math.random() * 100) + 20)
        const option = {
          backgroundColor: 'transparent',
          tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(0,0,0,0.8)',
            textStyle: { color: '#fff' }
          },
          grid: { left: '5%', right: '5%', top: '10%', bottom: '15%', containLabel: true },
          xAxis: {
            type: 'category',
            data: categories,
            axisLine: { lineStyle: { color: '#e0e0e0' } },
            axisTick: { show: false },
            axisLabel: { color: '#666' }
          },
          yAxis: {
            type: 'value',
            axisLine: { show: false },
            axisTick: { show: false },
            splitLine: { lineStyle: { color: '#f0f0f0' } }
          },
          series: [{
            name: '视频数量',
            type: 'bar',
            data: values,
            itemStyle: {
              color: (params) => {
                const colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#f9ca24', '#a55eea', '#6c5ce7']
                return colors[params.dataIndex % colors.length]
              },
              borderRadius: [4, 4, 0, 0]
            }
          }]
        }
        this.charts.categoryChart.setOption(option)
      }
    },

    // 更新24小时活跃图 - 简洁版
    updateHourlyChart() {
      if (this.charts.hourlyChart) {
        const hours = Array.from({length: 12}, (_, i) => `${i * 2}:00`) // 简化为12个点
        const activities = Array.from({length: 12}, (_, i) => {
          const baseValue = Math.floor(Math.random() * 30) + 10
          if (i >= 4 && i <= 5) return baseValue + 40 // 上午高峰
          if (i >= 9 && i <= 11) return baseValue + 60 // 晚上高峰
          return baseValue
        })
        const option = {
          backgroundColor: 'transparent',
          tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(0,0,0,0.8)',
            textStyle: { color: '#fff' }
          },
          grid: { left: '5%', right: '5%', top: '10%', bottom: '15%', containLabel: true },
          xAxis: {
            type: 'category',
            data: hours,
            axisLine: { lineStyle: { color: '#e0e0e0' } },
            axisTick: { show: false }
          },
          yAxis: {
            type: 'value',
            axisLine: { show: false },
            axisTick: { show: false },
            splitLine: { lineStyle: { color: '#f0f0f0' } }
          },
          series: [{
            name: '活跃度',
            type: 'line',
            smooth: true,
            data: activities,
            lineStyle: { width: 3, color: '#45b7d1' },
            itemStyle: { color: '#45b7d1' },
            areaStyle: { color: 'rgba(69, 183, 209, 0.2)' }
          }]
        }
        this.charts.hourlyChart.setOption(option)
      }
    },

    // 更新地域分布图
    updateRegionChart() {
      if (this.charts.regionChart) {
        const regions = ['北京', '上海', '广州', '深圳', '杭州', '成都', '武汉', '西安']
        const values = regions.map(() => Math.floor(Math.random() * 1000) + 200)
        const option = {
          backgroundColor: 'transparent',
          tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'shadow' },
            backgroundColor: 'rgba(0,0,0,0.8)',
            textStyle: { color: '#fff' }
          },
          grid: { left: '5%', right: '5%', top: '10%', bottom: '15%', containLabel: true },
          xAxis: {
            type: 'category',
            data: regions,
            axisLine: { lineStyle: { color: '#e0e0e0' } },
            axisTick: { show: false },
            axisLabel: { color: '#666', rotate: 45 }
          },
          yAxis: {
            type: 'value',
            axisLine: { show: false },
            axisTick: { show: false },
            splitLine: { lineStyle: { color: '#f0f0f0' } }
          },
          series: [{
            name: '用户数',
            type: 'bar',
            data: values,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#667eea' },
                { offset: 1, color: '#764ba2' }
              ]),
              borderRadius: [4, 4, 0, 0]
            }
          }]
        }
        this.charts.regionChart.setOption(option)
      }
    },

    // 更新设备类型图
    updateDeviceChart() {
      if (this.charts.deviceChart) {
        const deviceData = [
          { name: 'iOS', value: 45, itemStyle: { color: '#007AFF' } },
          { name: 'Android', value: 42, itemStyle: { color: '#34C759' } },
          { name: 'Web', value: 13, itemStyle: { color: '#FF9500' } }
        ]
        const option = {
          backgroundColor: 'transparent',
          tooltip: {
            trigger: 'item',
            formatter: '{b}: {c}%',
            backgroundColor: 'rgba(0,0,0,0.8)',
            textStyle: { color: '#fff' }
          },
          series: [{
            name: '设备类型',
            type: 'pie',
            radius: ['50%', '80%'],
            center: ['50%', '50%'],
            data: deviceData,
            label: {
              show: true,
              formatter: '{b}\n{c}%',
              fontSize: 14,
              color: '#666'
            },
            labelLine: { show: false }
          }]
        }
        this.charts.deviceChart.setOption(option)
      }
    },

    // 更新增长趋势图
    updateGrowthChart() {
      if (this.charts.growthChart) {
        const months = ['1月', '2月', '3月', '4月', '5月', '6月']
        const userGrowth = [120, 145, 168, 192, 225, 268]
        const videoGrowth = [80, 95, 110, 128, 145, 165]
        const option = {
          backgroundColor: 'transparent',
          tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(0,0,0,0.8)',
            textStyle: { color: '#fff' }
          },
          legend: {
            data: ['用户增长', '视频增长'],
            textStyle: { color: '#666' },
            top: 10
          },
          grid: { left: '5%', right: '5%', top: '20%', bottom: '10%', containLabel: true },
          xAxis: {
            type: 'category',
            data: months,
            axisLine: { lineStyle: { color: '#e0e0e0' } },
            axisTick: { show: false }
          },
          yAxis: {
            type: 'value',
            axisLine: { show: false },
            axisTick: { show: false },
            splitLine: { lineStyle: { color: '#f0f0f0' } }
          },
          series: [
            {
              name: '用户增长',
              type: 'line',
              smooth: true,
              data: userGrowth,
              lineStyle: { width: 3, color: '#667eea' },
              itemStyle: { color: '#667eea' },
              areaStyle: { color: 'rgba(102, 126, 234, 0.1)' }
            },
            {
              name: '视频增长',
              type: 'line',
              smooth: true,
              data: videoGrowth,
              lineStyle: { width: 3, color: '#f093fb' },
              itemStyle: { color: '#f093fb' },
              areaStyle: { color: 'rgba(240, 147, 251, 0.1)' }
            }
          ]
        }
        this.charts.growthChart.setOption(option)
      }
    },

    // 更新内容质量图
    updateQualityChart() {
      if (this.charts.qualityChart) {
        const qualityData = [
          { name: '优质', value: 65, itemStyle: { color: '#67c23a' } },
          { name: '良好', value: 25, itemStyle: { color: '#e6a23c' } },
          { name: '一般', value: 8, itemStyle: { color: '#f56c6c' } },
          { name: '较差', value: 2, itemStyle: { color: '#909399' } }
        ]
        const option = {
          backgroundColor: 'transparent',
          tooltip: {
            trigger: 'item',
            formatter: '{b}: {c}%',
            backgroundColor: 'rgba(0,0,0,0.8)',
            textStyle: { color: '#fff' }
          },
          series: [{
            name: '内容质量',
            type: 'pie',
            radius: ['30%', '70%'],
            center: ['50%', '50%'],
            data: qualityData,
            label: {
              show: true,
              formatter: '{b}\n{c}%',
              fontSize: 12,
              color: '#666'
            },
            labelLine: { show: false },
            roseType: 'area'
          }]
        }
        this.charts.qualityChart.setOption(option)
      }
    },

    // 更新所有图表
    updateAllCharts() {
      this.$nextTick(() => {
        this.updateTrendChart()
        this.updateBehaviorChart()
        this.updateCategoryChart()
        this.updateHourlyChart()
        this.updateRegionChart()
        this.updateDeviceChart()
        this.updateGrowthChart()
        this.updateQualityChart()

        Object.values(this.charts).forEach(chart => {
          if (chart) chart.resize()
        })
      })
    },

    // 开始自动滚动
    startAutoScroll() {
      if (this.$refs.scrollContainer) {
        this.scrollInterval = setInterval(() => {
          const container = this.$refs.scrollContainer
          const scrollHeight = container.scrollHeight
          const clientHeight = container.clientHeight

          if (container.scrollTop + clientHeight >= scrollHeight) {
            // 滚动到底部时，平滑回到顶部
            container.scrollTo({
              top: 0,
              behavior: 'smooth'
            })
          } else {
            // 慢速向下滚动
            container.scrollBy({
              top: 2,
              behavior: 'smooth'
            })
          }
        }, 50) // 每50ms滚动2px，速度适中
      }
    },

    // 停止自动滚动
    stopAutoScroll() {
      if (this.scrollInterval) {
        clearInterval(this.scrollInterval)
        this.scrollInterval = null
      }
    },

    // 开始通知更新
    startNotificationUpdates() {
      this.dataInterval = setInterval(() => {
        this.addNewNotification()
        this.updateCharts()
      }, 5000) // 5秒添加一条新通知
    },

    // 更新所有图表
    updateCharts() {
      this.updateMainTrendChart()
      this.updateTypeDistributionChart()
      this.updateHeatmapChart()
      this.updateRadarChart()
      this.updateFunnelChart()
      this.updateMapChart()
      this.updateStreamChart()
    },

    // 销毁图表
    destroyCharts() {
      Object.values(this.charts).forEach(chart => {
        if (chart) {
          chart.dispose()
        }
      })
      this.charts = {
        mainTrendChart: null,
        typeDistributionChart: null,
        heatmapChart: null,
        radarChart: null,
        funnelChart: null,
        mapChart: null,
        streamChart: null
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.notifications-container {
  height: 100vh;
  overflow: hidden;
}

.header-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background: #fff;
  border-bottom: 1px solid #e6e6e6;

  .current-time {
    font-size: 18px;
    color: #409EFF;
    font-weight: bold;
  }
}

// ECharts通知仪表板样式
.echarts-notification-dashboard {
  height: calc(100vh - 80px);
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  overflow-y: auto;
  padding: 20px;

  &::-webkit-scrollbar {
    width: 8px;
  }

  &::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;

    &:hover {
      background: rgba(0, 0, 0, 0.5);
    }
  }
}

// 仪表板标题
.dashboard-title {
  text-align: center;
  margin-bottom: 30px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  padding: 25px 30px;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);

  h1 {
    font-size: 36px;
    font-weight: 700;
    color: #2c3e50;
    margin: 0 0 15px 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
  }

  .dashboard-info {
    display: flex;
    justify-content: center;
    gap: 40px;
    align-items: center;

    .time {
      font-size: 18px;
      color: #34495e;
      font-weight: 500;
    }

    .status {
      display: flex;
      align-items: center;
      color: #27ae60;
      font-weight: 600;

      i {
        margin-right: 8px;
        font-size: 16px;
      }
    }
  }
}

// 数据卡片
.data-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 30px;

  .data-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    position: relative;
  overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #feca57, #48dbfb, #ff9ff3);
    }

    &:hover {
      transform: translateY(-8px) scale(1.02);
      box-shadow: 0 20px 60px rgba(31, 38, 135, 0.25);
    }

    .card-header {
  display: flex;
      align-items: center;
      margin-bottom: 15px;

      .card-icon {
        font-size: 28px;
        margin-right: 12px;
      }

      .card-title {
    font-size: 16px;
        font-weight: 600;
        color: #2c3e50;
      }
    }

    .card-value {
      font-size: 32px;
      font-weight: 700;
      color: #2c3e50;
      margin-bottom: 8px;
      line-height: 1;
    }

    .card-trend {
      display: flex;
      align-items: center;
      color: #27ae60;
      font-size: 14px;
      font-weight: 600;

      i {
        margin-right: 4px;
      }
    }
  }
}

// 图表展示区域
.charts-area {
  .chart-row {
    display: grid;
    gap: 20px;
    margin-bottom: 20px;

    &.main-charts {
      grid-template-columns: 2fr 1fr;
    }

    &.secondary-charts {
      grid-template-columns: repeat(3, 1fr);
    }

    &.overview-charts {
      grid-template-columns: 2fr 1fr;
    }

    .chart-card {
      background: rgba(255, 255, 255, 0.95);
      border-radius: 16px;
      padding: 25px;
      box-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);

      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 48px rgba(31, 38, 135, 0.2);
      }

      .chart-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 2px solid #f8f9fa;

        h3 {
          font-size: 18px;
          font-weight: 600;
          color: #2c3e50;
          margin: 0;
          display: flex;
          align-items: center;
        }

        .chart-legend {
          display: flex;
          gap: 15px;

          .legend-item {
            font-size: 12px;
            font-weight: 500;

            &.like { color: #ff6b6b; }
            &.comment { color: #4ecdc4; }
            &.collect { color: #feca57; }
          }
        }
      }

      .chart-canvas {
        height: 280px;
        width: 100%;

        .medium & {
          height: 240px;
        }
      }
    }
  }
}

// 动画效果
@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

@keyframes slideInLeft {
  from {
    transform: translateX(-20px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

// 响应式设计
@media (max-width: 1400px) {
  .charts-area .chart-row {
    &.secondary-charts {
      grid-template-columns: repeat(2, 1fr);

      .chart-card:last-child {
        grid-column: span 2;
      }
    }
  }
}

@media (max-width: 1024px) {
  .echarts-notification-dashboard {
  padding: 15px;
  }

  .dashboard-title {
    padding: 20px;
  margin-bottom: 20px;

    h1 {
      font-size: 28px;
    }

    .dashboard-info {
      gap: 20px;

      .time {
    font-size: 16px;
      }
    }
  }

  .data-cards {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 20px;

    .data-card {
      padding: 20px;

      .card-value {
        font-size: 28px;
      }
    }
  }

  .charts-area .chart-row {
    gap: 15px;
    margin-bottom: 15px;

    &.main-charts,
    &.overview-charts {
      grid-template-columns: 1fr;
    }

    &.secondary-charts {
      grid-template-columns: 1fr;

      .chart-card:last-child {
        grid-column: span 1;
      }
    }

    .chart-card {
      padding: 20px;

      .chart-canvas {
        height: 220px;
      }
    }
  }
}

@media (max-width: 768px) {
  .dashboard-title {
    h1 {
      font-size: 24px;
    }

    .dashboard-info {
      flex-direction: column;
      gap: 10px;
    }
  }

  .data-cards {
    grid-template-columns: repeat(2, 1fr);

    .data-card {
      padding: 15px;

      .card-header .card-icon {
        font-size: 24px;
      }

      .card-value {
        font-size: 24px;
      }
    }
  }

  .charts-area .chart-row .chart-card {
    padding: 15px;

    .chart-title h3 {
      font-size: 16px;
    }

    .chart-canvas {
      height: 180px;
    }
  }
}

.scroll-area {
  display: flex;
  gap: 20px;
  height: calc(100% - 80px);
}

.scroll-column {
  flex: 1;
  background: #fff;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);

  .column-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .scroll-content {
    height: calc(100% - 50px);
    overflow-y: auto;

    &::-webkit-scrollbar {
      width: 4px;
    }

    &::-webkit-scrollbar-thumb {
      background: #ddd;
      border-radius: 2px;
    }

    .scroll-item {
      padding: 10px;
      margin-bottom: 8px;
      background: #f9f9f9;
      border-radius: 6px;
      border-left: 3px solid #e0e0e0;

      &:hover {
        background: #f0f0f0;
      }

      &.disabled {
        opacity: 0.6;
        background: #ffeaea;
        border-left-color: #f56c6c;
      }

      .item-info {
        margin-bottom: 5px;
        line-height: 1.4;

        strong {
          color: #333;
        }

        span {
          color: #666;
          margin: 0 4px;
        }

        em {
          color: #409EFF;
          font-style: normal;
        }
      }

      .item-time {
        font-size: 12px;
        color: #999;
      }

      .item-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 5px;

        .item-time {
          margin: 0;
        }
      }
    }
  }
}

.table-mode {
  padding: 20px;
  background: #f5f5f5;

  // 用户信息样式
  .user-info {
    display: flex;
    align-items: center;
    gap: 8px;

    .user-details {
      display: flex;
      flex-direction: column;
      font-size: 12px;

      .nickname {
        font-weight: bold;
        color: #333;
      }

      .user-id {
        color: #999;
        font-size: 11px;
      }
    }
  }

  // 评论内容样式
  .comment-content {
    .comment-level {
      margin-bottom: 8px;
    }

    .content-text {
      margin-bottom: 8px;
      line-height: 1.5;

      &.blocked {
        opacity: 0.6;
        color: #999;
        text-decoration: line-through;
      }

      .reply-prefix {
        color: #409EFF;
        font-weight: bold;
      }
    }

    .comment-stats {
      display: flex;
      gap: 15px;
      font-size: 12px;
      color: #666;

      .stat-item {
        display: flex;
        align-items: center;
        gap: 3px;

        &.time {
          color: #999;
        }

        i {
          font-size: 14px;
        }
      }
    }
  }

  // 视频链接样式
  .video-link {
    padding: 0;
    font-size: 12px;

    i {
      margin-right: 4px;
    }
  }

  .video-title {
    font-size: 11px;
    color: #666;
    margin-top: 4px;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  min-height: calc(100vh - 80px);
}

// 动画效果
@keyframes slideInLeft {
  from {
    transform: translateX(-20px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.scroll-item {
  animation: slideIn 0.5s ease-out;
}

// 响应式设计
@media (max-width: 1200px) {
  .content-area {
    flex-direction: column;
  }

  .data-overview {
    flex-wrap: wrap;

    .overview-card {
      min-width: calc(50% - 10px);
    }
  }
}
</style>
